<template>
	<view class="wrap">
		<view class="head">


			<!-- 分页组件 -->
			<div class="headTop">
				<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
					<view class="arrow">
						&lt
					</view>
				</button>
				<button @click="changeNowShowIndex(-1)">
					<view class="changeOriginArrow">
						&lt
					</view>
				</button>
				
				<view class="headCenter">
					<img :src="this.newsList[this.nowShowIndex].icon" alt="">
					<view class="newsTitle">
						{{this.newsList[this.nowShowIndex].title}}
					</view>
				</view>


				<button @click="changeNowShowIndex(1)">
					<view class="changeOriginArrow">
						&gt
					</view>
				</button>
				
				<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
					<view class="arrow">
						&gt
					</view>
				</button>

				
				
			</div>
			<!-- 数据列表 -->
			<ul class="listdata">
				<li v-for="(item,index) in paginatedItems" :key="item.title">{{ item.title }}</li>
			</ul>



		</view>


	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				items: [], // 总数据列表
				currentPage: 1, // 当前页码
				pageSize: 5, // 每页显示的条目数
				nowShowIndex:0
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				uni.request({
					url: 'https://cm.happycheer.com/cmVars/getVariableInfoByKey?key=TEST_MSG_en-IN_newsList&format=api',
					method: 'GET',
					success: (res) => {
						if (res.data.errCode === 0 && res.data.data) {
							this.newsList = res.data.data['TEST_MSG_en-IN_newsList'];
							if (this.newsList.length > 0) {
								this.items = this.newsList[this.nowShowIndex].list;
							}
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			changePage(newPage) {
				if (newPage >= 1 && newPage <= this.totalPages) {
					this.currentPage = newPage;
				}
			},
			changeNowShowIndex(num){
				if(num==-1&&this.nowShowIndex!=0){
					this.nowShowIndex-=1
				}else if(num==1){
					this.nowShowIndex+=1
				}
				this.items=this.newsList[this.nowShowIndex].list;
			}
		},
		computed: {
			// 计算当前页的分页数据
			paginatedItems() {
				if (!this.items || !this.items.length) return [];
				const start = (this.currentPage - 1) * this.pageSize;
				const end = start + this.pageSize;
				return this.items.slice(start, end);
			},
			// 计算总页数
			totalPages() {
				if (!this.items || !this.items.length) return 0;
				return Math.ceil(this.items.length / this.pageSize);
			},
		},
	}
</script>

<style scoped lang="scss">
	* {
		list-style: none;
	}

	.head {
		padding-top: 20rpx;
		width: 750rpx;
		height: 348rpx;
		background-color: #454e6d;
		border-radius: 30rpx;

		li {
			font-size: 23rpx;
			color: #fff;

		}

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 75rpx;
			height: 75rpx;
			background-color: transparent;
			.arrow{
				color: #fff;
				font-weight: 600;
			}
		}
	}

	.headTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.headCenter{
		display: flex;
		align-items: center;
		img{
			width:50rpx;
			height:50rpx;
			border-radius: 25rpx;
		}
		.newsTitle{
			font-size: 25rpx;
			color: #fff;
			font-weight: 700;
		}
	}
	.listdata{
		padding-left: 0px;
		padding-inline-start: 0px !important;
	}

</style>
